<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src='script/jquery.js'></script>

</head>

<body>
    <header class='header'>
        <div class="content">
            <a href="/" class="logo">
                <img src="images/logo_3.png" alt="">
            </a>
            <nav class='shadow'>
                <ul>
                    <li>
                        <a href="index.php">首页</a>
                    </li>
                    <li>
                        <a href="usercenter.php">用户中心</a>
                    </li>
                    <li>
                        <a href="#">充值中心</a>
                    </li>
                    <li>
                        <a href="#">客服中心</a>
                    </li>

                </ul>
                <ul class='pull-right'>
                    <li class='search_box'>
                        <a href="" class='search_btn pull-left'></a>
                        <input class='search_input pull-left' type="text" placeholder="请输入漫画名/作者"></li>
                    <li class='pushlisher'>
                        <a href="">
                            <span class='icon'></span>我要投稿
                        </a>
                    </li>
                </ul>
            </nav>

        </div>
    </header>

    <div class="container chapter">
        <div class="content clearfix">
            
        </div>
    </div>


    <footer class='footer content'>
        <ul>
            <li>
                <p>珠海布卡科技有限公司</p>
                <p>地址:珠海市香洲区夏美路161号(南厦丰泽园)2栋二层商铺234C</p>
            </li>
            <li>
                <p>客服:service@buka.cn</p>
                <p>投稿:td.sosobook.cn</p>
                <p>合作:bd@buka.cn</p>
            </li>
            <li>
                <p>电话:</p>
                <p>0756-3360306</p>
            </li>
            <li>
                ICP备案号:粤ICP备1234567号-1
            </li>
            <li>
                <span class="bkn"></span>
                <div class="qipao">
                    <span class="arrow"></span>
                    <p>沉迷娱乐伤身</p>

                    <p> 合理安排时间</p>

                    <p> 享受健康生活</p>

                    <p> 适龄17岁以上</p>
                </div>
            </li>
        </ul>
    </footer>

    <div id="mask">
        <div class="note">
            <p class="header">
                查看笔记 <span class='pull-right close'>X</span>
            </p>
            <textarea name="" id="" cols="66" rows="12"></textarea>
            <footer>
                <button>修改笔记</button>
                <button class='close'>关闭</button>
            </footer>
        </div>
    </div>
    <script src='script/script.js'>
    </script>
</body>
</html>

<script type="text/template">
<div class="pull-left box">
                <img src="./images/lhsl_199x259.jpg" alt="">
                <div class='info'>
                    <img src="./images/header.jpg" alt="">
                    <div>
                        <p>首席鉴黄师</p>
                        <p>三天前投递了第45话</p>
                    </div>
                </div>
            </div>

            <div class="pull-right box bgw">
                <header class="title">
                    灵魂撕裂
                </header>
                <div class='info'>
                    作者 <span class="auther"> 唐马儒 </span> 更新 <span> 2018-01-01</span>
                    <div class="description">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et aut, labore quaerat voluptatibus dolore, deleniti eligendi quam dolor quibusdam, quae sequi! Quod ad vero necessitatibus, saepe repellat adipisci obcaecati illo, doloremque in, delectus laboriosam!
                        Nemo porro iste placeat tenetur. Impedit inventore maxime cum fuga ut doloribus dolore libero commodi, odio repellendus hic corporis molestias consectetur? Expedita nihil quidem illo repellat, aliquam aliquid a, et quos, provident
                        earum doloremque tempore! Voluptatibus veritatis accusantium nobis ea? Facere modi architecto voluptates omnis esse fugiat officiis excepturi quam praesentium explicabo accusantium corporis, ducimus inventore, cupiditate voluptate
                        possimus velit nihil at! Repellat illum nihil blanditiis perferendis, autem, culpa adipisci earum et necessitatibus minima ducimus quia id quam tempora aliquid ex placeat. Dolorum, aut. Iure reprehenderit recusandae vitae harum,
                        praesentium, minima tenetur sunt veniam soluta eius reiciendis neque? Quam ipsam nihil deleniti, ab reiciendis, illo facere sequi cum tenetur inventore corporis commodi, possimus architecto iusto natus!
                    </div>
                    <hr>
                    <button>开始阅读</button> <button id='mark'>收藏</button> <button id='marknote'>做笔记</button>
                    <p class="title">连载(话):</p>
                    <ul>
                        <li>1话</li>
                        
                    </ul>
                </div>
            </div>
</script>